<template>
  <div class="container" ref="container" @scroll="handleScroll">
    <div class="content" ref="content">
      <p v-for="item in myData" :key="item">{{ item }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";

const container = ref();
const content = ref();

const myData = ref([
  "数据1",
  "数据2",
  "数据3",
  "数据4",
  "数据5",
  "数据6",
  "数据7",
  "数据8",
  "数据9",
]);

let isTop = ref(true);

const handleScroll = (event: Event) => {
  if (container.value?.scrollTop === 0) {
    console.log("到顶了");
    for (let i = 9; i > 0; i--) {
      myData.value.unshift(`追加数据${i}`);
    }

    nextTick(() => {
      container.value.scrollTop = container.value.firstChild.offsetHeight;
      console.log("当前containerscrollTop：", container.value.scrollTop);
    });
  }
};
</script>

<style scoped>
.container {
  display: flex;
  background-color: red;

  justify-content: center;
  align-content: center;

  width: 90vw;
  height: 30vh;

  overflow: auto;
}

.content {
  //background-color: chartreuse;
  //width: 13%;
  //height: 150%;
}
</style>
